<template>
	<view>
		<view class="table-content">
			<table class="table">
				<tr>
					<th class="th" v-for="(item, index) in columns" :key="index">{{item.title}}</th>
				</tr>
				<tr v-for="(item, index) in dataSource" :key="item.id">
						<td class="td" v-for="(it, ind) in columns" :key="ind">
							<slot
								v-if="it.scopedSlots && it.scopedSlots.customRender"
								:name="it.scopedSlots.customRender"
								:record="item"
								:text="item[it.dataIndex]"
							>
								<span>{{ item[it.dataIndex] }}</span>
							</slot>
							<span v-else>{{ item[it.dataIndex] }}</span>
						</td>
				</tr>
			</table>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			columns: {
				type: [Array],
				default: () => []
			},
			dataSource: {
				type: [Array],
				default: () => []
			}
		},
		data() {
			return {
				
			}
		},
		methods: {}
	}
</script>

<style lang="scss" scoped>
.header{
	padding: 20rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: #f5f5f5;
	font-family: PingFangSC-Medium, PingFang SC;
	font-weight: 600;
	color: #aaaaaa;
	font-size: 16px;
}
.table-content{
	overflow: auto;
	background-color: #ffffff;
	padding: 20rpx 10rpx;
	.table{
		white-space: nowrap;
		.td{
			text-align: center;
			padding: 0 10rpx;
			font-size: 14px;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: rgba(0,0,0,.65);
		}
		.th{
			font-family: PingFangSC-Regular, PingFang SC;
			font-size: 14px;
			text-align: center;
			padding: 0 10rpx;
			color: rgba(0,0,0,.85);
			font-weight: 500;
		}
	}
}
</style>